<template>
    <view class="page">
        <view class="content">
            <view class="content-title">
                付款金额
            </view>
            <view class="content-input">
                <u--input placeholder="请输入本次消费金额" border="none" v-model="value" @change="change"></u--input>
                <view class="input-price">
                    实付款:<text>200.00</text>
                </view>
            </view>
            <view class="content-title">
                支付方式
            </view>
            <u-checkbox-group>
                <view class="content-list">
                    <view class="list-item">
                        <view class="item-left">
                            <view class="item-title">
                                股东卡红包支付
                            </view>
                            <view class="item-price">
                                余额:200.00(有效期2天)
                            </view>
                        </view>
                        <view class="item-right">
                            <u-checkbox active-color="#59b9c8" shape="circle" :name="1"> </u-checkbox>
                        </view>
                    </view>
                    <view class="list-item">
                        <view class="item-left">
                            <view class="item-title">
                                全店通余额支付
                            </view>
                            <view class="item-price">
                                余额:200.00(有效期2天)
                            </view>
                        </view>
                        <view class="item-right">
                            <u-checkbox active-color="#59b9c8" shape="circle" :name="2"> </u-checkbox>
                        </view>
                    </view>
                    <view class="list-item">
                        <view class="item-left">
                            <view class="item-title">
                                会员卡余额支付
                            </view>
                            <view class="item-price">
                                余额:200.00
                            </view>
                        </view>
                        <view class="item-right">
                            <u-checkbox active-color="#59b9c8" shape="circle" :name="3"> </u-checkbox>
                        </view>
                    </view>
                    <view class="list-item">
                        <view class="item-left">
                            <view class="item-title">
                                微信支付
                            </view>
                        </view>
                        <view class="item-right">
                            <u-checkbox active-color="#59b9c8" shape="circle" :name="4"> </u-checkbox>
                        </view>
                    </view>
                </view>
            </u-checkbox-group>
            <view class="content-note">
                查看<text>个人信息授权与保护声明</text>
            </view>
            <view class="content-btn" @click="pay">
                确认支付
            </view>
        </view>
    </view>
</template>

<script>
    // #ifdef H5
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return false;
    }
    // #endif
    export default {
        data() {
            return {
                title: 'Hello',
                news: [],
                multi: [],
                single: ''
            }
        },
        onLoad() {
            this.getInfo()
        },
        methods: {
            getInfo(){
                this.$request(this.$api.user.info,{code:getQueryVariable('code')},'GET').then(res=>{
                    if(res.code==0){
                        
                    }
                })
            },
            pay(){
                uni.showLoading({
                    title:'支付中...'
                })
                let params = {
                    
                }
                this.$request(this.$api.wx.pay,params,'POST').then(res=>{
                    if(res.code==0){
                        this.onBridgeReady(res.data)
                    }
                })
            },
            onBridgeReady(data) {
                // uni.showModal({
                //     title:'11',
                //     content:JSON.stringify(data)
                // })
                WeixinJSBridge.invoke('getBrandWCPayRequest', {
                        "appId": data.appId, //公众号ID，由商户传入    
                        "timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数    
                        "nonceStr": data.nonceStr, //随机串    
                        "package": data.package,
                        "signType": 'RSA', //微信签名方式：    
                        "paySign": data.sign //微信签名
                    },
                    function(res) {
                        
                        if (res.err_msg == "get_brand_wcpay_request:ok") {
                            // 使用以上方式判断前端返回,微信团队郑重提示：
                            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                            uni.showToast({
                                title: '支付成功',
                            })
                            setTimeout(() => {
                                
                            }, 2000)
                        }else{
                            uni.showToast({
                                title:'支付已取消',
                                icon:'error '
                            })
                        }
                    });
            },
            
        }
    }
</script>

<style scoped lang="scss">
    .page {
        min-height: 100vh;
        background-color: #f5f5f5;
    }

    .content {
        padding: 20rpx;

        .content-title {
            font-weight: bold;
            font-size: 34rpx;
        }

        .content-input {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #cccccc;
            padding: 20rpx 0;
            margin-bottom: 40rpx;

            .input-price {
                color: #ff5733;
                display: flex;
                align-items: flex-end;
                justify-content: start;

                text {
                    margin-left: 10rpx;
                    font-size: 42rpx;
                }
            }
        }

        .content-list {
            margin-top: 20rpx;
            width: 100%;
            .list-item {
                background-color: #ffffff;
                border-radius: 8rpx;
                padding: 20rpx;
                margin-bottom: 10rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .item-left{
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    color: #999999;
                    .item-title{
                        margin-right: 10rpx;
                    }
                    .item-price{
                        font-size: 24rpx;
                    }
                }
            }
        }
        .content-note{
            margin-top: 20rpx;
            color: #999999;
            font-size: 24rpx;
            padding: 20rpx;
            text{
                margin-left: 20rpx;
                color: #0097e2;
            }
        }
        .content-btn{
            position: fixed;
            width: 700rpx;
            bottom: 50rpx;
            left: 50%;
            transform: translate(-50%,0);
            background-color: #62cadc;
            border-radius: 12rpx;
            text-align: center;
            padding: 20rpx;
            box-sizing: border-box;
            color: #ffffff;
            &:active{
                background-color: #59b9c8;
            }
        }
    }
</style>